<div class="box">
  <div class="row">
    <x-button (click)="open('top-start', '上左')">上左</x-button>
    <x-button (click)="open('top', '上')">上(默认)</x-button>
    <x-button (click)="open('top-end', '上右')">上右</x-button>
  </div>
  <div class="row">
    <x-button (click)="open('left', '左')">左</x-button>
    <x-button (click)="open('center', '中')">中</x-button>
    <x-button (click)="open('right', '右')">右</x-button>
  </div>
  <div class="row">
    <x-button (click)="open('bottom-start', '下左')">下左</x-button>
    <x-button (click)="open('bottom', '下')">下</x-button>
    <x-button (click)="open('bottom-end', '下右')">下右</x-button>
  </div>
</div>
